<template>
  <el-container class="main_con main-loading">
    <div class="gift_body">
      <div class="left">
        <div class="app_div">
          <div class="pup_div">
            <img src="@/assets/images/hbbj.png" />
            <div class="content">
              <div class="list">
                <div class="item" v-if="hascoupon" v-for="(item, i) in selectPro" :key="i">
                  <img src="@/assets/images/card_bg.png" />
                  <div class="text_box">
                    <div class="text_left">
                      <div class="text_price">
                        <span>￥</span>
                        <span class="lg_text">{{ item.denomination }}</span>
                      </div>
                      <span class="text_tip">满{{ item.conditions }}元可以使用</span>
                    </div>
                    <div class="text_right"><span>立即领取</span></div>
                  </div>
                </div>
                <div class="item" v-if="hasamount">
                  <img src="@/assets/images/card_bg.png" />
                  <div class="text_box">
                    <div class="text_left">
                      <div class="text_price">
                        <span class="lg_text">{{ obj.config.amount }}</span>
                        <span>元</span>
                      </div>
                      <span class="text_tip">新手送礼,余额好礼</span>
                    </div>
                    <div class="text_right"><span>立即领取</span></div>
                  </div>
                </div>
                <div class="item" v-if="hasintegral">
                  <img src="@/assets/images/card_bg.png" />
                  <div class="text_box">
                    <div class="text_left">
                      <div class="text_price">
                        <span class="lg_text">{{ obj.config.integral }}</span>
                        <span>积分</span>
                      </div>
                      <span class="text_tip">新手送礼,积分好礼</span>
                    </div>
                    <div class="text_right"><span>立即领取</span></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <el-form label-width="100px" ref="Form" :model="obj" :rules="Rules">
          <el-form-item label="活动名称" prop="name"><el-input v-model="obj.name" style="width: 350px;"></el-input></el-form-item>
          <el-form-item label="活动期限" prop="dateRange">
            <!-- <date-picker :default='time' size="medium" @change="gettime"></date-picker> -->
            <el-date-picker
              size="medium"
              v-model="dateRange"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="使用平台">
            <!-- <el-checkbox :true-label="1" :false-label="0" v-model="obj.config.platform.web">h5</el-checkbox> -->
            <el-checkbox :true-label="1" :false-label="0" v-model="obj.config.platform.wechat">公众号</el-checkbox>
            <el-checkbox :true-label="1" :false-label="0" v-model="obj.config.platform.wechata">小程序</el-checkbox>
          </el-form-item>
          <el-form-item label="优惠奖励">
            <el-checkbox v-if="is_coupon" v-model="hascoupon">优惠券</el-checkbox>
            <el-checkbox v-if="is_deduction" v-model="hasintegral">积分</el-checkbox>
            <el-checkbox v-model="hasamount">余额</el-checkbox>
            <div class="box">
              <el-form-item v-if="hascoupon" label="优惠券">
                <el-button @click="showSelectCon = true">添加优惠卷（{{ selectPro.length }}/3）</el-button>
                <el-table class="mt_15" :data="selectPro">
                  <el-table-column label="优惠券名称" prop="name"></el-table-column>
                  <el-table-column prop="conditions" label="满" width="180"></el-table-column>
                  <el-table-column prop="denomination" label="减" width="180"></el-table-column>
                  <el-table-column prop="total_limit" label="库存"></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button type="text" @click="deleteData(scope.row.id)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
              <el-form-item v-if="hasintegral" label="积分"><el-input v-model="obj.config.integral" style="width: 300px;"></el-input></el-form-item>
              <el-form-item v-if="hasamount" label="余额"><el-input v-model="obj.config.amount" style="width: 300px;"></el-input></el-form-item>
            </div>
          </el-form-item>
          <el-form-item><el-button type="primary" @click="save">确定</el-button></el-form-item>
        </el-form>
      </div>
    </div>
    <el-dialog title="选择优惠券" :visible.sync="showSelectCon" width="50%" append-to-body>
      <SelectConpon :limit="3" :key="rk" :data="selectPro" @outData="closePro"></SelectConpon>
    </el-dialog>
  </el-container>
</template>

<script>
import DatePicker from '@/components/DatePicker/index';
import SelectConpon from '@/components/SelectConpon/index';
import {giftdetail, savegift, editgift} from '@/api/mall/activity';
import {jur_addons_item, jur_addons} from '@/utils/jurisdiction';

export default {
  data() {
    //校验使用日期
    let validateDr = (rule, value, callback) => {
      if (this.dateRange.length == 0) {
        callback(new Error('有效期必须选择'));
      } else {
        callback();
      }
    };
    return {
      obj: {
        name: '', //名称
        config: {
          amount: 0,
          coupon: [],
          integral: 0,
          platform: {web: 1, wechat: 1, wechata: 1}
        }, //必传	json	配置
        start_time: '', //	必传	int	开始时间
        end_time: '' //	必传	string	结束时间
      },
      time: [],
      hascoupon: false,
      hasamount: false,
      hasintegral: false,
      selectPro: [],
      isuse: false,
      rk: 1,
      showSelectCon: false,
      dateRange: [],
      Rules: {
        name: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入名称'
          }
        ],
        dateRange: [
          {
            required: true,
            validator: validateDr
          }
        ]
      },
      is_coupon: false,
      is_deduction: false
    };
  },
  components: {
    DatePicker,
    SelectConpon
  },

  mounted() {
    jur_addons([7, 3]).then(res => {
      if (res[3]) {
        this.is_coupon = true;
      }

      if (res[7]) {
        this.is_deduction = true;
      }
    });
    if (this.$route.query && this.$route.query.id) {
      this.id = this.$route.query.id;
      this.getdetail();
    }
  },
  methods: {
    gettime(e) {
      console.log(e);
    },
    closePro(e) {
      this.isuse = true;
      this.showSelectCon = false;
      if (e) {
        this.selectPro = e;
      }
    },
    deleteData(id) {
      let i = this.selectPro.findIndex(_ => _.id == id);
      this.selectPro.splice(i, 1);
      // this.data.list.splice(i, 1);
    },
    getdetail() {
      let data = {
        id: this.id
      };
      giftdetail(data).then(res => {
        if (res.msg) {
          let coupon_data = res.msg.coupon_data;
          this.dateRange = [res.msg.start_time, res.msg.end_time];
          let obj = res.msg;
          if (obj.config.coupon.length > 0) {
            this.hascoupon = true;
          }
          if (obj.config.amount > 0) {
            this.hasamount = true;
          }
          if (obj.config.integral > 0) {
            this.hasintegral = true;
          }
          this.obj = obj;
          this.selectPro = coupon_data;
        }
      });
    },
    save() {
      var _this = this;
      _this.obj.config.coupon = [];
      _this.selectPro.forEach(a => {
        _this.obj.config.coupon.push(a.id);
      });

      this.$refs.Form.validate(valid => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(_this.obj));
          if (!_this.hasamount) {
            data.config.amount = 0;
          }
          if (!_this.hasintegral) {
            data.config.integral = 0;
          }
          if (!_this.hascoupon) {
            data.config.coupon = [];
          }
          data.config = JSON.stringify(data.config);
          data.start_time = _this.dateRange[0];
          data.end_time = _this.dateRange[1];

          if (data.id) {
            editgift(data).then(res => {
              _this.$router.push('/activity/gift');
            });
          } else {
            savegift(data).then(res => {
              _this.$router.push('/activity/gift');
            });
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.main_con {
  .gift_body {
    background-color: #ffffff;
    padding: 20px;
    display: flex;
    align-items: center;
    height: 100%;
    .box {
      margin-top: 10px;
      background-color: #f4f6f8;
      padding: 30px 20px;
      border-radius: 2px;
      font-size: 14px;
      line-height: 20px;
      color: #262b30;
    }
    .right {
      flex: 1;
    }
    .left {
      .app_div {
        width: 375px;
        height: 667px;
        background: rgba(0, 0, 0, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        .pup_div {
          display: flex;
          flex-direction: column;
          width: 302px;
          img {
            width: 302px;
          }
          .content {
            // height: 400px;
            background-image: linear-gradient(180deg, #ff6508, #ff3a00);
            padding-bottom: 10px;
            padding-top: 10px;
            border-radius: 0 0 10px 10px;
            .list {
              margin: 0 auto;
              width: 270px;
              // height: 195px;
              background: #ffffff;
              border-radius: 10px;
              max-height: 220px;
              min-height: 100px;
              padding: 10px 0;
              scrollbar-width: none; /* firefox */
              -ms-overflow-style: none; /* IE 10+ */
              overflow-x: hidden;
              overflow-y: auto;
              &::-webkit-scrollbar {
                display: none; /* Chrome Safari */
              }

              // overflow-y:scroll;
              .item {
                margin: 5px auto;
                width: 225px;
                position: relative;

                // height: 77px;
                img {
                  width: 225px;
                }
                .text_box {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  top: 14px;
                  left: 17px;
                  display: flex;
                  width: 192px;
                  height: 64px;

                  .text_left {
                    display: flex;
                    flex-direction: column;

                    width: 129px;
                    height: 64px;
                    align-items: center;
                    justify-content: center;
                    .text_price {
                      display: flex;
                      align-items: flex-end;
                      span {
                        font-size: 13px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #ff6658;
                      }
                      .lg_text {
                        font-size: 32px;
                        line-height: 1;
                      }
                      margin-bottom: 5px;
                    }
                    .text_tip {
                      font-size: 12px;
                      color: #999999;
                    }
                  }
                  .text_right {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    span {
                      display: block;
                      width: 25px;
                      height: 27px;
                      font-size: 12px;
                      font-weight: bold;
                      color: #fb5648;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
